<template>
	<view class="forgot-password">
		<gyd-navbar back-color="#fff" :title="title"></gyd-navbar>

		<uni-forms :modelValue="formData" ref="uForm" :rules="rules">
			<uni-forms-item label="手机号" name="mobile">
				<input v-model="formData.mobile" placeholder="请输入注册时预留手机号" type="text"></input>
			</uni-forms-item>

			<uni-forms-item label="验证码" name="verify_code">
				<input v-model="formData.verify_code" style="width:340rpx;" placeholder="请输入手机验证码" type="text"></input>
				<button style="width:200rpx;" slot="right" size="mini" class="btn" @click="getCode()">
					<text class="txt">{{codeMsg}}</text>
				</button>
			</uni-forms-item>

			<uni-forms-item label="新密码" name="new_pass">
				<input v-model="formData.new_pass" placeholder="请输入新密码" type="password"></input>
			</uni-forms-item>
		</uni-forms>

		<button class="u-button" :style="{background: themeColor.theme}" @click="submit">提交</button>
	</view>
</template>

<script setup>
	import request from '@/utils/request';
	import cache from '@/utils/cache';
	import util from '@/utils/util';
	import {
		reactive,
		toRefs,
		inject,
		ref,
	} from 'vue';
	import {
		onLoad,
		onShow,
		onReady,
		onPullDownRefresh,
		onReachBottom,
	} from '@dcloudio/uni-app';

	const state = reactive({
		title: '忘记密码',
		themeColor: cache.get('themeColor'),
		imgHost: util.requestUrl(),
		formData: {
			mobile: '',
			verify_code: '',
			new_pass: ''
		},
		codeMsg: '获取验证码'
	});

	//在页面所有元素加载完成后执行（只执行一次）
	onLoad((opt) => {
		console.log('onLoad');
		if (opt.hasOwnProperty('id')) {
			console.log('传递参数', opt.id);
		}
	});

	//在页面由不可见变为可见时执行（只要页面显示都会执行）
	onShow(() => {
		console.log('onShow');
	})

	//在页面解析完成之后执行
	onReady(() => {
		console.log('onReady');
	})

	onPullDownRefresh(() => {
		console.log('下拉刷新');
		setTimeout(() => {
			uni.stopPullDownRefresh();
		}, 1000);
	})

	onReachBottom(() => {
		console.log('触底加载更多');
	})

	function pageRoute(url) {
		uni.navigateTo({
			url
		});
	}

	function pageTabRoute(url) {
		uni.reLaunch({
			url
		});
	}

	const {
		title,
		themeColor,
		imgHost,
		formData,
		codeMsg,
	} = toRefs(state);
</script>

<style lang="scss">
	page {
		height: 100%;
		background-color: $u-bg-reverse-color;
	}

	.forgot-password {
		padding: $m32;

		.btn {
			height: 60rpx;
			line-height: 60rpx;
			background: linear-gradient(to right, #125cd7, #279dfa);
			border-radius: 40rpx;

			.txt {
				font-size: 26rpx;
				color: #FFFFFF;
			}
		}
	}
</style>